<template>
    <v-chart
    class="chart"
    :option="option"
    v-if="JSON.stringify(option) != '{}'"
  />
</template>
<script lang="ts" setup>
    import { ref,onMounted} from "vue";
    import { currentGET } from "@/api";
    import {graphic} from "echarts/core"
    const option = ref({});
    const dataInfo = ref({})

    // 饼图数据
    
    const setOption = () => {
        option.value = {
            
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(0,0,0,0.8)',
                borderColor: 'rgba(147, 235, 248, 0.8)',
                textStyle: {
                    color: '#fff'
                },
                formatter: function(params) {
                    return params.seriesName + '<br/>' + params.name + ': ' + params.value + '<br/>' + '占比' + Math.floor(params.percent) + '%';
                }
            },
            legend: {
                orient: 'horizontal',
                left: 'center',
                bottom: '0',
                textStyle: {
                    color: '#ffffff',
                    fontSize: 12
                },
                itemWidth: 10,
                itemHeight: 10
            },
            series: [
                {
                    name: '共享运力',
                    type: 'pie',
                    radius: ['00%', '60%'],
                    center: ['50%', '45%'],
                    roseType: false,
                    avoidLabelOverlap: false,
                    // 启用3D效果
                    emphasis: {
                        scale: true,
                        scaleSize: 10
                    },
                    label: {
                        show: true,
                        color: '#fff',
                        textBorderWidth: 0,
                        textBorderColor: 'transparent',
                        formatter: function(params) {
                            return params.name + ': ' + Math.floor(params.percent) + '%';
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        {
                            value: dataInfo.value.insharedTravel,
                            name: '在租',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#4FC3F7' },
                                        { offset: 0.5, color: '#29B6F6' },
                                        { offset: 1, color: '#1976D2' }
                                    ]
                                },
                            }
                        },
                        
                        {
                            value: dataInfo.value.waitingsharedTravel,
                            name: '待租',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#4CAF50' },
                                        { offset: 0.5, color: '#388E3C' },
                                        { offset: 1, color: '#1B5E20' }
                                    ]
                                },
                            }
                        },
                        {
                            value: dataInfo.value.batterySwap,
                            name: '换电',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#FFB74D' },
                                        { offset: 0.5, color: '#FF9800' },
                                        { offset: 1, color: '#E65100' }
                                    ]
                                },
                            }
                        },
                        {
                            value: dataInfo.value.malfunction,
                            name: '故障',
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [
                                        { offset: 0, color: '#FF6B6B' },
                                        { offset: 0.5, color: '#FF6B6B' },
                                        { offset: 1, color: '#FF6B6B' }
                                    ]
                                },
                            }
                        }
                    ]
                }
            ]
        }
    }
    
onMounted(()=>{
    let timer = setTimeout(()=>{
        setOption();
        clearTimeout(timer)
    },1000)
})
const getData = (data: any) => {
    dataInfo.value = JSON.parse(data)

}

defineExpose({
    getData
})

</script>
<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>